<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane label="角色管理">
            <!-- 新增按钮 -->
            <el-button
              v-if="checkBtnPerm('add-role')"
              style="margin: 20px 0"
              size="small"
              type="primary"
              @click="addRole"
            >新增角色</el-button>
            <!-- 表格
              data: 设置表格数据源
            table-column: 表示表格的列
              prop：设置用于渲染列内容对应的属性名
              label: 设置列的标题
              width：设置列的宽度
             -->
            <el-table :data="tableData" stripe style="width: 100%">
              <!-- 渲染序号：
                方式一：给列组件设置type属性并赋值为index即可
               -->
              <!-- <el-table-column type="index" label="序号" width="100" /> -->
              <el-table-column label="序号" width="100">
                <!-- 方式二：作用域插槽渲染序号 -->
                <!-- <template v-slot="{$index, row}"> -->
                <template v-slot="{$index}">
                  <!--
                    $index: 是行对应的下标值
                    row: 当前行的数据对象

                  序号 = 每页展示的数量*（当前页码-1）+ 下标值+1
                   -->
                  {{ pagesize*(page-1) + $index+1 }}
                </template>
              </el-table-column>
              <el-table-column prop="name" label="角色" width="180" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作" width="250">
                <!-- 作用域插槽自定义内容 -->
                <template v-slot="{row}">
                  <el-button type="success" size="small" @click="assignPerm(row.id)">分配权限</el-button>
                  <el-button v-if="checkBtnPerm('edit-role')" type="primary" size="small" @click="editRole(row.id)">编辑</el-button>
                  <el-button v-if="checkBtnPerm('del-role')" type="danger" size="small" @click="delRole(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-row type="flex" justify="center">
              <!--
                prev: 左箭头
                pager：页码
                next：右箭头
                total：总数量
                page-size: 设置每页展示的数据数量
               -->
              <el-pagination
                :page-size="pagesize"
                layout="prev, pager, next"
                :total="total"
                @current-change="currentChange"
              />
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="公司信息">
            <!-- disabled：表示禁用表单 -->
            <el-form disabled label-width="120px">
              <el-form-item label="公司名称">
                <el-input v-model="company.name" />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="company.companyAddress" />
              </el-form-item>
              <el-form-item label="公司邮箱">
                <el-input v-model="company.mailbox" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="company.remarks" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 新增角色
      根据html语法规范，推荐标签属性使用串烧写法，
      而不用驼峰命名，因此这里属性写的show-dialog其实
      就是showDialog，他们是等价的
       -->
      <!-- <AddRole
        :show-dialog="visibleDialog"
        @closeEvent="visibleDialog=false"
      /> -->
      <!-- 当子组件修改showDialog值的时候
      sync会自动监听到该事件，并把子组件赋值
      给showDialog的值同步给visibleDialog -->
      <AddRole
        ref="addRole"
        :show-dialog.sync="visibleDialog"
        @updateEvent="getRoleList"
      />
      <!-- <div ref="mydiv2" class="mydiv">我是一个div</div> -->
      <!-- 分配权限 -->
      <AssignPermission
        ref="assignPerm"
        :show-dialog.sync="showDialog"
      />
    </div>
  </div>
</template>

<script>
import { roleList, delRole, getCompany } from '@/api/setting'
import AddRole from './components/addRole.vue'
import AssignPermission from './components/assignPermission.vue'
export default {
  components: { AddRole, AssignPermission },
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1, // 页码
      pagesize: 2,
      visibleDialog: false, // 新增/编辑角色弹窗
      company: {},
      showDialog: false // 分配权限弹窗
    }
  },
  async created() {
    // 获取角色列表
    this.getRoleList()
    const id = this.$store.state.user.userInfo.companyId
    const res = await getCompany(id)
    // 保存公司信息
    this.company = res.data.data
    console.log(this)
  },
  methods: {
    // 按钮操作权限判断函数
    // checkBtnPerm(code) {
    //   // code：值是我们在权限设置页面中为按钮设置好的标识符
    //   const roles = this.$store.state.user.userInfo.roles
    //   // console.log(roles.points)
    //   // 我们这里只需要判断，按钮的标识符是否存在在points数组即可
    //   // 存在说明有权限，返回true，否则返回false
    //   return roles && roles.points.includes(code)
    // },
    // 分配权限
    assignPerm(id) {
      this.showDialog = true
      // 通过ref属性获取组件，然后调用组件中的函数
      this.$refs.assignPerm.getRoleDetail(id)
    },
    // 编辑角色
    editRole(id) {
      this.visibleDialog = true
      // 调用子组件中的getRoleDetail函数，从而获取点击角色的详情
      // 这里我们可以同ref获取到子组件实例，从而调用子组件的函数
      // console.log(115, this.$refs.addRole)
      this.$refs.addRole.getRoleDetail(id)
    },
    // 删除角色
    delRole(id) {
      console.log('点击删除按钮对应角色id', id)
      // 询问框
      this.$confirm('是否确定删除？', '提示', {
        type: 'warning'
      }).then(async() => {
        // 调用接口 实现删除
        await delRole(id)
        // 当删除最后一页的最有一条数据的时候，我们更新列表请求上一页的数据，（因为当前页的数据已经被删完）
        if (this.tableData.length === 1 && this.page !== 1) {
          // 当渲染的列表数据长度等于1的说明 当前页面只剩下最后一条数据了
          // 且当前页不能是第一页，否则减一就变为0了
          this.page--
        }
        // 更新列表
        this.getRoleList()
      }).catch(err => {
        console.log('点击了取消按钮：', err)
      })
    },
    // 新增角色
    addRole() {
      this.visibleDialog = true
    },
    // 页码发生改变时触发
    currentChange(page) {
      // console.log(page)
      this.page = page
      this.getRoleList()
    },
    // 获取角色列表
    async getRoleList() {
      const res = await roleList({
        page: this.page,
        pagesize: this.pagesize
      })
      // console.log(res)
      // 保存总数量
      this.total = res.data.data.total
      // 保存角色列表
      this.tableData = res.data.data.rows
    }
  }
}
</script>

<style>
</style>
